<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               ref="crud"
               :page.sync="page"
               v-permission="{addBtn: 'TOPMENU_ADD',editBtn: 'TOPMENU_UPDATE',delBtn: 'TOPMENU_DELETE'}"
               v-model="form">

      <template slot="menuLeft">
        <el-button type="danger" v-permission="'TOPMENU_DELETE'" icon="el-icon-delete" size="small" @click.stop="deletes()">批量删除</el-button>
      </template>

      <template slot="menuRight" slot-scope="{size}">

        <avue-select v-model="clientId"
                     placeholder="请选择客户端"
                     :clearable="false"
                     style="margin-right: 10px;width: 50%!important;"
                     type="tree"
                     :props="{label: 'name',value: 'id'}"
                     :dic="clientList"
                     :size="size"></avue-select>
      </template>

      <template slot="status" slot-scope="scope">

        <el-tag v-permission="'!TOPMENU_SWITCH'" :type="scope.row.status===0?'warning':''">{{scope.row.params.status}}</el-tag>

        <el-switch
            v-permission="'TOPMENU_SWITCH'"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="statusSwitch(scope.row)">
        </el-switch>

      </template>

      <template slot="icon" slot-scope="scope">
        <i :class="scope.row.icon"></i>
      </template>

      <template slot="menu" slot-scope="scope">
        <el-button type="text"
                   icon="el-icon-setting"
                   v-permission="'TOPMENU_FUNCTION'"
                   @click="setFunction(scope.row,scope.index)"
                   size="small">关联菜单
        </el-button>
      </template>

    </avue-crud>

    <el-dialog custom-class="avue-dialog" class="avue-dialog" :title="this.title"
               v-dialogDrag
               :close-on-click-modal="false"
               width="400px"
               append-to-body
               :visible.sync="functionBox">

          <avue-tree :data="this.allFunctionList"
                     :option="{nodeKey: 'id', filterText:'请输入关键字进行搜索', multiple:true, menu: false,props:{label: 'function_name',value: 'id'}, addBtn: false}"
                   check-on-click-node
                   :style="styleName"
                   node-key="id"
                   ref="allFunction"
                   :props="{label: 'function_name',value: 'id'}">
          </avue-tree>

          <span slot="footer" class="avue-dialog__footer">
              <el-button @click="functionBox = false">取 消</el-button>
              <el-button v-permission="'TOPMENU_FUNCTION_SAVE'" type="primary" @click="submitFunction">确 定</el-button>
          </span>
    </el-dialog>

  </basic-container>
</template>

<script>
import {validatenull} from "@/util/validate";

export default window.$crudCommon({
  data () {
    return {
      heightCalc: 519,
      height: 0,
      clientId: '',
      clientList: [],
      allFunctionList: [],
      functionBox: false,
      checkMenuId: '',
      title: '关联菜单'
    }
  },
  created () {
    this.api['clientList']().then(res => {

      if (validatenull(res.data.data)){
        this.$message.error('请先新建客户端');
        return;
      }

      this.clientList = res.data.data;
      this.clientId = res.data.data[0].id;
    });
  },
  watch: {
    'clientId'(){
      this.getList();
    }
  },
  computed: {
    styleName() {
      return {
        height: this.height + 'px'
      }
    }
  },
  mounted() {
    this.height = document.documentElement.clientHeight - this.heightCalc;
  },
  methods: {
    listBefore(done){
      if (this.clientId){
        this.params.clientId_eq = this.clientId;
        done();
      }
    },
    addBefore(done){
      this.form.clientId = this.clientId;
      done();
    },
    submitFunction(){
      const functionIds = this.$refs.allFunction.getCheckedKeys().join(",");
      this.api['saveFunction']({
        menuId: this.checkMenuId,
        functionIds: functionIds
      }).then(() => {
        this.functionBox = false;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      });
    },
    setFunction(row){
      this.checkMenuId = row.id;

      this.api['listFunction'](this.clientId).then(res => {
        this.allFunctionList = res.data.data;
        this.functionBox = true;

        this.api['listFunctionId'](row.id).then(res => {
          this.title = "["+row.name+"]关联菜单";
          this.$refs.allFunction.setCheckedKeys(res.data.data);
        });
      });
    },
    statusSwitch(row) {
      this.api['statusSwitch'](row.id,row.status).then(res => {
        if (!res.data.status){
          row.status = !row.status;
        }else {
          if (row.status === 1) {
            row.params.status = '是';
          } else {
            row.params.status = '否';
          }
        }
      }).catch(() =>{
        row.status = !row.status;
      });

    }
  }
}, {
  name: '/system/menu',
  data: 'list'
})
</script>

<style lang="scss" scoped>
</style>